Better JavaScript — Destructuring, Hoisting, and Closures

Like any kind of apps, JavaScript apps also have to be written well.

Otherwise, we run into all kinds of issues later on.

In this article, we’ll look at ways to improve our JavaScript code.

Use Destructuring to Extract Properties to Variables

If we want to extract properties to variables, we can use the destructuring assignment syntax.

For instance, we can write:

function foo(x, y) {
  const {
    min,
    round,
    sqrt
  } = Math;
  return min(round(x), sqrt(y));
}

to get the min , round , and sqrt methods from the Math object.

Then we can call the methods by using the variables instead of referencing Math repeatedly.

Getting Comfortable with Closures

Closures are something that we may not familiar with.

It may seem intimidating when we first work with them.

However, it’s actually simple.

Closures are just functions that are inside functions.

The inner functions can refer to variables in their parent’s scope.

For instance, we can write:

function makePie() {
  const ingredient = "peanut butter";

  function make(filling) {
    return `${ingredient} and ${filling}`;
  }
  return make("jelly");
}

We have a make function that takes the filling parameter and we return something after combining it with the ingredient from its parent function.

This means that we can keep private variables in functions and then access them from the inner function.

Also, we can return functions as variables in JavaScript.

For instance, we can write:

function makePie() {
  const ingredient = "peanut butter";

  function make(filling) {
    return `${ingredient} and ${filling}`;
  }
  return make;
}

and return the make function.

Then we can use it to create a new function by writing”

const f = makePie();
f('banana cream');

Then we get 'peanut butter and banana cream’ from the returned f function call.

We can shorten the makePie function more by writing:

function makePie() {
  const ingredient = "peanut butter";

  return function(filling) {
    return `${ingredient} and ${filling}`;
  }
}

We return an anonymous function instead.

JavaScript functions don’t have to have a name.

Closures can update the values of outer variables.

For instance, we can write:

function foo() {
  let val;
  return {
    set(newVal) {
      val = newVal;
    },
    get() {
      return val;
    },
    type() {
      return typeof val;
    }
  };
}

We created the foo function and returned an object with the set , get and type methods.

set sets the value of val .

get returns the value of val .

And type return the data type of val .

val is outside of the object, but it’s accessible by the object since it’s in its parent’s scope.

Each of these closures shares access to val .

Variable Hoisting

Variable hoisting is where a variable’s declaration can be accessed before the variable is defined.

This only applies to variables declared with var .

let and const variables are block-scoped and aren’t hoisted.

For instance, we can see a hoisted variable by writing:

console.log(foo);
var foo = 1;

foo is undefined but it can be accessed.

To avoid this, we should just use let and const variables.

Conclusion

We should use destructuring syntax to extract properties from objects.

Closures are something that we may use sometimes.

They’re functions that are in functions.

Variable hoisting is something that we may encounter but it’s less and less common.